<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Themes</title>
</head>
<link href="../../js/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="../../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../../css/iconfont/iconfont.css" rel="stylesheet"> <!-- 字体图标 -->
<link href="../../css/icon-font/iconfont.css" rel="stylesheet"> <!-- 字体图标 -->
<link href="../../css/old/dashboard.css" rel="stylesheet" >
<link href="../../js/hover/hover-min.css" rel="stylesheet">
<link href="../../css/old/global.css" rel="stylesheet">
<link href="../../css/old/sidebbar.css" rel="stylesheet">
<!-- The javascripts -->
<script src="../../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="../../js/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../js/jquery.velocity.min.js" type="text/javascript"></script>
<script src="../../js/bootstrap/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="../../js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="UTF-8"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="../../js/html5shiv.min.js" type="text/javascript"></script>
  <script src="../../js/respond.min.js" type="text/javascript"></script>
<![endif]-->

<body>

	<div class="tbar f14">
		<div class="con">
			<div class="left_con">
				<span>黄江波您好，欢迎来到运营分析平台！</i>
				<span>2016年10月29日</span>
				<span>周一</span>
				<span>9:53:3</span>
			</div>
			<div class="right_con">
				<ul class="t_link">
					<li>
						<a href="#">
							<i class="iconfont">&#xe612;</i>	
							广西
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont">&#xe613;</i>	
							返回沃易购
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont">&#xe611;</i>	
							联系客服
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>	
							退出
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="menu">
		<div class="con">
			<div class="logo"></div>
			<ul class="navLink">
				<li class="active">
					<a href="#">整体概况</a>
				</li>
				<li><a href="#">供货参谋</a></li>
				<li><a href="#">商品透视</a></li>
				<li><a href="#">营销观象台</a></li>
				<li><a href="#">渠道画像</a></li>
			</ul>
		</div>
	</div>



	<div class="container-fluid">
	    <div class="row">
			<!-- 侧边栏 -->
			<div class="col-sm-3 col-md-2 sidebar">
				<div class="data_centre">
					<h2>
						<i class="glyphicon glyphicon-hdd"></i>
						<span>数据分析中心</span>
					</h2>
				</div>
			    <ul class="mtree bubba">
				  <li><a href="#"><i class="icon iconfont icon-liuliang"></i>流量分析</a>
				    <ul>
				      <li><a href="#">Algeria</a></li>
				      <li><a href="#">Marocco</a></li>
				      <li><a href="#">Libya</a></li>
				      <li><a href="#">Somalia</a></li>
				      <li><a href="#">Kenya</a></li>
				      <li><a href="#">Mauritania</a></li>
				      <li><a href="#">South Africa</a></li>
				    </ul>
				  </li>
				  <li><a href="#"><i class="icon iconfont icon-shangpin"></i>商品分析</a>
				    <ul>
				      <li><a href="#">流量概况</a>
				        <ul>
				          <li><a href="#">流量地图-地市</a></li>
				          <li><a href="#">USA</a>
				            <ul>
				              <li><a href="#">New York</a></li>
				              <li><a href="#">California</a>
				                <ul>
				                  <li><a href="#">Los Angeles</a></li>
				                  <li><a href="#">San Diego</a></li>
				                  <li><a href="#">Sacramento</a></li>
				                  <li><a href="#">San Francisco</a></li>
				                  <li><a href="#">Bakersville</a></li>
				                </ul>
				              </li>
				              <li><a href="#">Lousiana</a></li>
				              <li><a href="#">Texas</a></li>
				              <li><a href="#">Nevada</a></li>
				              <li><a href="#">Montana</a></li>
				              <li><a href="#">Virginia</a></li>
				            </ul>
				          </li>
				        </ul>
				      </li>
				      <li><a href="#">流量地图</a>
				        <ul>
				          <li><a href="#">访客结构</a></li>
				          <li><a href="#">搜索排行</a></li>
				          <li><a href="#">店铺热力图</a>
							<ul>
								<li><a href="#"></a></li>
								<li><a href="#"></a></li>
								<li><a href="#"></a></li>
							</ul>
				          </li>
				         </ul>
				      </li>
				      <li><a href="#">South-America</a>
				        <ul>
				          <li><a href="#">Brazil</a></li>
				          <li><a href="#">Argentina</a></li>
				          <li><a href="#">Uruguay</a></li>
				          <li><a href="#">Chile</a></li>
				        </ul>
				      </li>
				    </ul>
				  </li>
				  <li><a href="#"><i class="icon iconfont icon-jiaoyi"></i>交易分析</a>
				    <ul>
				      <li><a href="#">China</a></li>
				      <li><a href="#">India</a></li>
				      <li><a href="#">Malaysia</a></li>
				      <li><a href="#">Thailand</a></li>
				      <li><a href="#">Vietnam</a></li>
				      <li><a href="#">Singapore</a></li>
				      <li><a href="#">Indonesia</a></li>
				      <li><a href="#">Mongolia</a></li>
				   </ul>
				  </li>
				  <li><a href="#"><i class="icon iconfont icon-huodong"></i>活动分析</a>
				    <ul>
				      <li><a href="#">North</a>
				        <ul>
				          <li><a href="#">Norway</a></li>
				          <li><a href="#">Sweden</a></li>
				          <li><a href="#">Finland</a></li>
				        </ul>
				      </li>
				      <li><a href="#">East</a>
				        <ul>
				          <li><a href="#">Romania</a></li>
				          <li><a href="#">Bulgaria</a></li>
				          <li><a href="#">Poland</a></li>
				        </ul>
				      </li>
				      <li><a href="#">South</a>
				        <ul>
				          <li><a href="#">Italy</a></li>
				          <li><a href="#">Greece</a></li>
				          <li><a href="#">Spain</a></li>
				        </ul>
				      </li>
				      <li><a href="#">West</a>
				        <ul>
				          <li><a href="#">France</a></li>
				          <li><a href="#">England</a></li>
				          <li><a href="#">Portugal</a></li>
				        </ul>
				      </li>
				   </ul>
				  </li>
				  <li><a href="#"><i class="icon iconfont icon-peizhi"></i>配置管理</a>
				    <ul>
				      <li><a href="#">Australia</a></li>
				      <li><a href="#">New Zealand</a></li>
				    </ul>
				  </li>
				  <li><a href="#">Arctica</a></li>
				  <li><a href="#">Antarctica</a></li>
				</ul>
			</div>
			<!-- 主要内容 -->
			<div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-2 main">
				<!-- 金字塔数据盒子 -->
				<div class="wb_pyramid">
					<div class="wb_order_pc">
						<p>下单转化率</p>
						<p>11%</p>
					</div>
					<div class="wb_order_paypc">
						<p>下单-支付转化率<a class="wb_ask" href="#">?</a></p>
						<p>11%</p>
					</div>
					<div class="wb_paypc">
						<p>支付转化率</p>
						<p>11%</p>
					</div>
					<ul class="wb_pyramid_one">
						<li>
							<p>访客数<i></i></p>
							<p>0</p>
						</li>
					</ul>
					<ul class="wb_pyramid_two">
						<li>
							<p>下单家数<i></i></p>
							<p>0</p>
						</li>
						<li>
							<p>下单金额<i></i></p>
							<p>0</p>
						</li>
					</ul>
					<ul class="wb_pyramid_three">
						<li>
							<p>支付卖家数<i></i></p>
							<p>0</p>
						</li>
						<li>
							<p>支付金额<i></i></p>
							<p>0</p>
						</li>
						<li>
							<p>客单价<i></i></p>
						</li>
					</ul>
				</div>

				<h2 class="sub-header">
					<span class="small">店铺排名</span>
					<i data-original-title="" class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读"></i>
					<span class="pull-right btn btn-primary btn-xs">更多</span>
				</h2>
				<!-- 店铺数据排名 -->
				<div class="row placeholders">
					
					<div class="col-xs-4  placeholder">
						<dl class="shop_info">
							<dt><img src="images/shopImg.png" width="80"></dt>
							<dd >
								<p>近一周交易额进行排名</p>
								<p>第<font size="7">25</font></span>名 <span class="label label-info">第一层级</span></p>
								<p>较上周
									<i class="glyphicon glyphicon-arrow-up col_orange"></i>
									<b class="col_orange"> 5名</b>
									<i class="glyphicon glyphicon-arrow-down col_green"></i>
									<b class="col_green"> 5名</b>
								</p>
							</dd>
						</dl>
					</div>
					<div class="col-xs-8 " >
						<div class="shop_level">
							<h4 >我的排名</h4>
							<ul class="nav nav-pills nav-justified">
								<li class="active">
									<a class="level_1"></a>
									<span>第一层级</span>
									<i class="">0%</i>
								</li>
								<li class="active">
									<a  class="level_2"></a>
									<span>第二层级</span>
									<i class="">20%</i>
								</li>
								<li class="">
									<a class="level_3"></a>
									<span>第三层级</span>
									<i class="">40%</i>
								</li>
								<li class="">
									<a class="level_4"></a>
									<span>第四层级</span>
									<i class="">60%</i>
								</li>
								<li class="">
									<a class="level_5"></a>
									<span>第五层级</span>
									<i >80%</i>
									<i class="fr">100%</i>
								</li>
							</ul>
							<!-- <ul class="shop_level_percentage">
								<li class="p1">0%</li>
								<li class="p2">20%</li>
								<li class="p3">40%</li>
								<li class="p4">60%</li>
								<li class="p5">80%</li>
								<li class="p6">100%</li>
							</ul> -->
							<p class="shop_level_txt">备注：我的行业排名是将沃易购平台上的所有店铺按照一周交易额进行排名，按照销量前20%、20%-40%、40%-60%、60%-80%、80%-100%划分层级展示店铺所在的层级。</p>	
						</div>
					</div>
				</div>

	          	<!-- 主标题/路径 -->
				<h1 class="page-header">
					<span class="small">数据分析中心</span>
					<span href="javascript:void(0)" data-trigger="hover" data-toggle="popover"   class="glyphicon glyphicon-question-sign" data-placement="right"  title="" data-content="流量概况主要是对供货商店铺的流量整体情况进行统计和分析，默认显示当天流量数据。页面有快速选择日期的选项，可以选择当天、前一天、最近7天、最近30天进行快速查看"></span>	
				</h1>

				<!-- 4个数据 -->
				<div class="row placeholders">
					<div class="col-xs-6 col-sm-3 placeholder">
						<span class="text-primary">
							访客数
							<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
						</span>
						<h3>5</h3>
						<span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					</div>
					<div class="col-xs-6 col-sm-3 placeholder">
					  <span class="text-primary">
					  	访客数
					  	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					  </span>
					  <h3>5</h3>
					  <span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
					</div>
					<div class="col-xs-6 col-sm-3 placeholder">
					  <span class="text-primary">
					  	访客数
					  	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					  </span>
					  <h3>121245242545</h3>
					  <span class="text-muted">较上期 <b class="text-success">+20%</b></span>
					</div>
					<div class="col-xs-6 col-sm-3 placeholder">
					  <span class="text-primary">
					  	访客数
					  	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					  </span>
					  <h3>5</h3>
					  <span class="text-muted">较上期 <b>0%</b></span>
					</div>
				</div>

				<hr><!-- 分割线 -->

				<!-- 3个数据 -->
				<div class="row placeholders">
					<div class="col-xs-6 col-sm-4 placeholder">
					  <span class="text-primary">
					  	访客数
					  	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					  </span>
					  <h3>5</h3>
					  <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					</div>
					<div class="col-xs-6 col-sm-4 placeholder">
					  <span class="text-primary">
					  	访客数
					  	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					  </span>
					  <h3>5</h3>
					  <span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
					</div>
					<div class="col-xs-6 col-sm-4 placeholder">
					  <span class="text-primary">
					  	访客数
					  	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					  </span>
					  <h3>121245242545</h3>
					  <span class="text-muted">较上期 <b class="text-success">+20%</b></span>
					</div>
				</div>

				<hr><!-- 分割线 -->

				<!-- 2个数据 -->
				<div class="row placeholders">
					<div class="col-xs-6 col-sm-6 placeholder">
						<span class="text-primary">
							访客数11
							<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读解读" ></i>
						</span>
						<h3>5</h3>
						<span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					</div>
					<div class="col-xs-6 col-sm-6 placeholder">
						<span class="text-primary">
							访客数
							<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
						</span>
						<h3>5</h3>
						<span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
					</div>
				</div>
			  
			   <!-- 分两部分5个数据 -->
				<div class="row placeholders">
					<div class="col-xs-6 col-sm-6 placeholder">
						<h4 class="sub-header">
							规模
						</h4>
			            <div class="col-xs-6 col-sm-6 ">
			              <span class="text-primary">
			              	访客数
			              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
			              </span>
			              <h3>5</h3>
			              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
			            </div>
			            <div class="col-xs-6 col-sm-6 ">
			              <span class="text-primary">
			              	访客数
			              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
			              </span>
			              <h3>5</h3>
			              <span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
			            </div>
		            </div>
		            <div class="col-xs-6 col-sm-6 placeholder">
						<h4 class="sub-header">
							质量
						</h4>
			            <div class="col-xs-6 col-sm-4 ">
			              <span class="text-primary">
			              	访客数
			              	<i class="glyphicon glyphicon-question-sign" data-trigger="click" data-toggle="popover" title="" data-content="这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读" ></i>
			              </span>
			              <h3>5</h3>
			              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
			            </div>
			            <div class="col-xs-6 col-sm-4 ">
			              <span class="text-primary">
			              	访客数
			              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
			              </span>
			              <h3>5</h3>
			              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
			            </div>
			            <div class="col-xs-6 col-sm-4 ">
			              <span class="text-primary">
			              	访客数
			              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读这里是解读这里是解读" ></i>
			              </span>
			              <h3>5</h3>
			              <span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
			            </div>
		            </div>
	          	</div>

				<!-- 数据解读 -->
				<h2 class="sub-header">
					<span class="small">流量概况</span>
					<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					<span class="pull-right btn btn-primary btn-xs">更多</span>
				</h2>
				<div class="row placeholders">
					<div class="col-xs-12 col-sm-12 placeholder">
						<div class="wb_decode clearfix">
							<div class="wb_decode_day">
								<p class="fs_big">7<span class="fs_small">天</span></p>
								<p>数据解读</p>									
							</div>
							<dl class="bor_r">
								<dt>交易波动解读 <i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i></dt>
								<dd>
									近7天访客 <b>231231</b>人，较上7天增加<b>2124</b> 人，店铺流量不给力，开展促销活动能够快速提升店铺流量！
								</dd>
							</dl>
							<dl>
								<dt>转化率解读 <i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i></dt>
								<dd>
									近7天访客集中于：山东省（日均 <b>1</b> 人），新访客（占比<b>100%</b>），PC端（占比<b>90%</b>）访客主要来源首页楼层，访客主要去向活动专区页面，立即查看访客结构，提升下单转化！
								</dd>
							</dl>
						</div>
					</div>
				</div>
			   
				<!-- 内容框 -->
				<div class="panel panel-default">
					<div class="panel-heading clearfix">
						<ul class="fl nav nav-pills">
							<li role="presentation"  class="active"><a href="#">今天</a></li>
							<li role="presentation"><a href="#">昨天</a></li>
							<li role="presentation" class="disabled"><a href="#">最近7天</a></li>
							<li role="presentation" class="disabled"><a href="#">最近30天</a></li>
					    </ul>
					    <form class="form-inline fl">
					        <div class="form-group">
					            <label>选择时间段：</label>
					            <div id="inp_dateFrom" class="input-group date">
					                <input class="form-control wt100" style="width:105px!important;min-width: 100px;background:#fff;" type="text" value="2017-01-01" placeholder="开始时间" readonly >
					                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					            </div>
					        </div>
					        <div class="form-group">
					            <label>到</label>
					            <div id="inp_dateTo" class="input-group date">
					                <input class="form-control wt100" style="width:105px!important;min-width: 100px;background:#fff;" type="text" value="2017-01-01" placeholder="结束时间" readonly >
					                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					            </div>
					        </div>
							<button id="searchButtonId" class="btn btn-default" type="button">查看</button>
					    </form>
					    <ul class="fr nav nav-pills">
					    	<li role="presentation"  class="active"><a href="#">全部</a></li>
							<li role="presentation"><a href="#">PC端</a></li>
							<li role="presentation"><a href="#">无线</a></li>
					    </ul>
					</div>
					<div class="panel-body">
						<!-- 单个标题 -->
						<h4 class="text-left">
							<i class="glyphicon glyphicon-equalizer"></i>
					 		<b>分区标题</b>
					 		<span class="pull-right btn btn-default btn-sm">更多</span>
						</h4>
						<div class="table-responsive">
							<table class="table table-striped">
							  <thead>
							    <tr>
							      <th>#</th>
							      <th>Header</th>
							      <th>Header</th>
							      <th>Header</th>
							      <th>Header</th>
							    </tr>
							  </thead>
							  <tbody>
							    <tr>
							      <td>
							      	<dl class="table_img">
							      		<dt><img src="" width="50" height="50"></dt>
							      		<dd>IPhone 6 银色 WCDMA</dd>
							      		<dd>价格：4960 库存：4</dd>
							      		<dd>发布时间:2015-03 9:32:56 </dd>
							      	</dl>
							      </td>
							      <td>Lorem</td>
							      <td>ipsum</td>
							      <td>dolor</td>
							      <td>
							      	dolor
							      </td>
							    </tr>
							    <tr>
							      <td>1,002</td>
							      <td>amet</td>
							      <td>consectetur</td>
							      <td>adipiscing</td>
							      <td>elit</td>
							    </tr>
							    <tr>
							      <td>1,015</td>
							      <td>sodales</td>
							      <td>ligula</td>
							      <td>in</td>
							      <td>libero</td>
							    </tr>
							  </tbody>
							</table>
							<div class="pagerBar" style="margin-top:0px;">
							    <span id="platformPagerId" data-count="2271" data-size="10" data-currentindex="1">
								<span style="float:right;margin-left:5px;">到第<input type="text" id="skipPageplatformPagerId" name="skipPageplatformPagerId" style="width:40px;height:27px;border:1px solid #E5E5E5;" value="1">页&nbsp;<button id="skipplatformPagerId" style="height:27px;border:1px solid #E5E5E5;background-color:#fff">确定</button></span><ul class="pages"> <li class="pgNext" pagerindex="1">上一页</li><li class="page-number pgCurrent" pagerindex="1">1</li><li class="page-number" pagerindex="2">2</li><li class="page-number" pagerindex="3">3</li><li>...</li><li class="page-number" pagerindex="227">227</li><li class="page-number" pagerindex="228">228</li><li class="pgNext" pagerindex="2">下一页</li></ul></span>
							</div>
						</div>
						
						<!-- 单个标题 -->
						<h4 class="text-left">
							<i class="glyphicon glyphicon-equalizer"></i>
						 	<b>分区标题</b>
						</h4>
						<!-- 分两部分5个数据 -->
						<div class="row placeholders">
							<div class="col-xs-6 col-sm-6 placeholder">
								<h5 class="sub-header">
									规模
								</h5>
					            <div class="col-xs-6 col-sm-6 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					            </div>
					            <div class="col-xs-6 col-sm-6 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
					            </div>
				            </div>
				            <div class="col-xs-6 col-sm-6 placeholder">
								<h5 class="sub-header">
									质量
								</h5>
					            <div class="col-xs-6 col-sm-4 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="click" data-toggle="popover" title="" data-content="这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					            </div>
					            <div class="col-xs-6 col-sm-4 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					            </div>
					            <div class="col-xs-6 col-sm-4 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读这里是解读这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
					            </div>
				            </div>
			          	</div>

			          	<!-- 分两部分4个数据 -->
						<div class="row placeholders">
							<div class="col-xs-6 col-sm-6 placeholder">
								<h5 class="sub-header">
									规模
								</h5>
					            <div class="col-xs-6 col-sm-6 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					            </div>
					            <div class="col-xs-6 col-sm-6 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-danger">-10%</b></span>
					            </div>
				            </div>
				            <div class="col-xs-6 col-sm-6 placeholder">
								<h5 class="sub-header">
									质量
								</h5>
					            <div class="col-xs-6 col-sm-6 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="click" data-toggle="popover" title="" data-content="这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					            </div>
					            <div class="col-xs-6 col-sm-6 ">
					              <span class="text-primary">
					              	访客数
					              	<i class="glyphicon glyphicon-question-sign" data-trigger="hover" data-toggle="popover" title="" data-content="这里是解读" ></i>
					              </span>
					              <h3>5</h3>
					              <span class="text-muted">较上期 <b class="text-warning">-1%</b></span>
					            </div>
				            </div>
			          	</div>

			          	 <!-- 单个标题 -->
						<h4 class="text-left">
							<i class="glyphicon glyphicon-equalizer"></i>
						 	<b>分区标题</b>
						</h4>
						<div class="row placeholders">
				            <div class="col-xs-12 col-sm-12 placeholder">
				            	<h5 class="sub-header">
									标题
								</h5>
						        <div class="col-sm-4">
							       	 <h4>Heading</h4>
							         <img class="img-circle" src="" alt="Generic placeholder image" height="140" width="140">
						        </div><!-- /.col-lg-4 -->
						        <div class="col-sm-4">
							       	 <h4>Heading</h4>
							         <img class="img-circle" src="" alt="Generic placeholder image" height="140" width="140">
						        </div><!-- /.col-lg-4 -->
						        <div class="col-sm-4">
							       	 <h4>Heading</h4>
							         <img class="img-circle" src="" alt="Generic placeholder image" height="140" width="140">
						        </div><!-- /.col-lg-4 -->
						    </div>
					    </div>
				    </div>
			     </div>
				<!-- 表格 -->
				<h2 class="sub-header">
				    <span class="small">用户信息</span>
				    <span href="javascript:void(0)" data-trigger="hover" data-toggle="popover"   class="glyphicon glyphicon-question-sign" data-placement="right"  title="" data-content="流量概况主要是对供货商店铺的流量整体情况进行统计和分析，默认显示当天流量数据。页面有快速选择日期的选项，可以选择当天、前一天、最近7天、最近30天进行快速查看"></span>
				</h2>
				<div class="table-responsive">
					<table class="table table-striped">
					  <thead>
					    <tr>
					      <th>#</th>
					      <th>Header</th>
					      <th>Header</th>
					      <th>Header</th>
					      <th>Header</th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr>
					      <td>1,001</td>
					      <td>Lorem</td>
					      <td>ipsum</td>
					      <td>dolor</td>
					      <td>sit</td>
					    </tr>
					    <tr>
					      <td>1,002</td>
					      <td>amet</td>
					      <td>consectetur</td>
					      <td>adipiscing</td>
					      <td>elit</td>
					    </tr>
					    <tr>
					      <td>1,015</td>
					      <td>sodales</td>
					      <td>ligula</td>
					      <td>in</td>
					      <td>2222</td>
					    </tr>
					  </tbody>
					</table>
				</div>
				<!-- 标签页 -->
				<ul class="nav nav-tabs" role="tablist">
				    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">店铺首页</a></li>
				    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">商品详情页</a></li>
				    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
				    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
				 </ul>
				<!-- 标签页内容 -->
				 <div class="tab-content">
				    <div role="tabpanel" class="tab-pane active" id="home">...0</div>
				    <div role="tabpanel" class="tab-pane" id="profile">...1</div>
				    <div role="tabpanel" class="tab-pane" id="messages">...2</div>
				    <div role="tabpanel" class="tab-pane" id="settings">...3</div>
				 </div>
				
				<div class="panel panel-default">
					<div class="panel-heading">
						<!-- 按钮组 -->
						 <!-- <div class="btn-group" role="group" aria-label="...">
						  <button type="button" class="btn btn-default active">Left<span class="badge">4</span></button>
						  <button type="button" class="btn btn-default">Middle<span class="badge">4</span></button>
						  <button type="button" class="btn btn-default">Right<span class="badge">4</span></button>
						</div> -->
						<ul class="nav nav-pills">
						  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
						  <li role="presentation"><a href="#">Profile <span class="badge">6</span></a></li>
						  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
						</ul>
					</div>
					 <div class="panel-body">
					    Basic panel example
					 </div>
				</div>
				
				<div class="btn-group" role="group" aria-label="..." style="margin-bottom:20px;">
					  <button type="button" class="btn btn-primary active">Left <span class="badge">2</span></button>
					  <button type="button" class="btn btn-default">Middle <span class="badge ">4</span></button>
					  <button type="button" class="btn btn-default">Right <span class="badge">4</span></button>
					</div>
				<div class="panel panel-default">
				  <div class="panel-body">
				     Panel
				  </div>
				 <!--  <div class="panel-footer">Panel footer</div> -->
				</div>

				 <!-- 标签页内容 -->
				 <div class="table_data">
				 	<p>
				 		<label>指标：</label>
				 		<label class="checkbox-inline">
						  	<input type="checkbox" id="inlineCheckbox1" value="option1">访客数（UV）
						  	<span class="label label-default label_50">Default</span>
						</label>

						<label class="checkbox-inline">
						  <input type="checkbox" id="inlineCheckbox2" value="option2"> 浏览量（PV）
						</label>
						<label class="checkbox-inline">
						  <input type="checkbox" id="inlineCheckbox3" value="option3"> 跳失率
						</label>
						<label class="checkbox-inline">
						  <input type="checkbox" id="inlineCheckbox2" value="option2"> 平均浏览页面
						</label>
						<label class="checkbox-inline">
						  <input type="checkbox" id="inlineCheckbox3" value="option3"> 平均停留时间
						</label>
				 	</p>
				 </div>

				 <!-- 商品对比 -->
				 <div class="rule_item_select2">
				 	<h3>商品对比：</h3>
				 	<div class="box">
		                <ul>
		                      <li><a href="#"><span>品牌：</span>锤子手机<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><a href="#"><span>网络：</span>4G<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><a href="#"><span>品牌：</span>锤子手机<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><a href="#"><span>网络：</span>4G<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><a href="#"><span>品牌：</span>锤子手机<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><a href="#"><span>网络：</span>4G<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><a href="#"><span>品牌：</span>锤子手机<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><a href="#"><span>网络：</span>4G<i class="glyphicon glyphicon-remove"></i></a></li>
		                      <li><span class="checkbox-inline btn btn-primary btn-xs" onclick="openGoodsModal()">添加对比商品</span></li>
		                </ul>
	                </div>
				 </div>



				 <!-- 圆 -->
				<div class="panel panel-default">
					<div class="panel-body">
						<div class="circle_bg col_bg_primary">
							<p>商品详情页</p>
							<p>访客数：<span>00</span></p>
						</div>
						<div class="circle_mid col_bg_default">
							<p>店铺首页</p>
							<p>访客数：<span>00</span></p>
						</div>
						<div class="circle_sm col_bg_success">
							<p>商品详情页</p>
							<p>访客数：<span>00</span></p>
						</div>
					</div>
				</div>
				 <!-- 三等分布局 -->
				<div class="row placeholder">
					<div class="col-md-4 ">
						<h5 class="sub-header">我是标题 <span class="label label-primary label_50">Primary</span></h5>
						<div class="table-responsive">
							<table class="table table-striped">
							  <thead>
							    <tr>
							      <th>#</th>
							      <th>Header</th>
							      <th>Header</th>
							    </tr>
							  </thead>
							  <tbody>
							    <tr>
							        <td><span class="label label-warning">1</span></td>
							        <td>Lorem</td>
							        <td>
								      	<div class="progress">
										  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
										    <span class="sr-only">40% Complete (success)</span>
										  </div>
										</div>
									</td>
							    </tr>
							    <tr>
							      <td><span class="label label-warning">2</span></td>
							      <td>amet</td>
							      <td>
							      	<div class="progress">
										  <div class="progress-bar " role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
										    <span class="sr-only">40% Complete (success)</span>
										  </div>
										</div>
								      	
									</td>
							    </tr>
							    <tr>
							      <td><span class="label label-warning">3</span></td>
							      <td>sodales</td>
							      <td>
								      	<div class="progress">
										  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
										    <span class="sr-only">40% Complete (success)</span>
										  </div>
										</div>
									</td>
							    </tr>
							    <tr>
							      <td><span class="label label-warning">4</span></td>
							      <td>sodales</td>
							      <td>
								      	<div class="progress">
										  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
										    <span class="sr-only">40% Complete (success)</span>
										  </div>
										</div>
									</td>
							    </tr>
							    <tr>
							      <td><span class="label label-warning">5</span></td>
							      <td>sodales</td>
							      <td>
								      	<div class="progress">
										  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
										    <span class="sr-only">40% Complete (success)</span>
										  </div>
										</div>
									</td>
							    </tr>
							  </tbody>
							</table>
						</div>
					</div>
				    <div class="col-md-4">
				    	<h5 class="sub-header">我是标题 <span class="label label-danger label_50">Danger</span></h5>
						<div class="circle_mid col_bg_warning">
							<p>店铺首页</p>
							<p>访客数：<span>00</span></p>
						</div>
						<div class="circle_sm col_bg_danger">
							<p>商品详情页</p>
							<p>访客数：<span>00</span></p>
						</div>
						<!-- <div class="circle_sm col_bg_warning">
							<p>商品详情页</p>
							<p>访客数：<span>00</span></p>
						</div>
						<div class="circle_mid col_bg_danger">
							<p>店铺首页</p>
							<p>访客数：<span>00</span></p>
						</div> -->
				    </div>
				    <div class="col-md-4">
				    	<div class="table-responsive">
				    		<h5 class="sub-header">我是标题 <span class="label label-success label_50">Danger</span></h5>
							<table class="table table-striped">
							  <thead>
							    <tr>
							      <th>#</th>
							      <th>Header</th>
							      <th>Header</th>
							    </tr>
							  </thead>
							  <tbody>
							    <tr>
							      <td>1,001</td>
							      <td>Lorem <span class="label label-warning label_50">Danger</span></td>
							      <td>ipsum</td>
							    </tr>
							    <tr>
							      <td>1,002</td>
							      <td>amet</td>
							      <td>consectetur</td>
							    </tr>
							    <tr>
							      <td>1,015</td>
							      <td>sodales</td>
							      <td>ligula</td>
							    </tr>
							  </tbody>
							</table>
						</div>
					</div>
				</div>
				<mark>我在 q 元素里面 "q 元素里面的 q元素" q 元素</mark>
				响应式设计缩写<abbr title="Responsive web design">RWD</abbr>

	        </div>
	    </div>
	</div>




  <!-- sidebar js-->
  <script>
	;(function ($, window, document, undefined) {
	    if ($('ul.mtree').length) {
	        var collapsed = true;
	        var close_same_level = false;
	        var duration = 400;
	        var listAnim = true;
	        var easing = 'easeOutQuart';
	        $('.mtree ul').css({
	            'overflow': 'hidden',
	            'height': collapsed ? 0 : 'auto',
	            'display': collapsed ? 'none' : 'block'
	        });
	        var node = $('.mtree li:has(ul)');
	        node.each(function (index, val) {
	            $(this).children(':first-child').css('cursor', 'pointer');
	            $(this).addClass('mtree-node mtree-' + (collapsed ? 'closed' : 'open'));
	            $(this).children('ul').addClass('mtree-level-' + ($(this).parentsUntil($('ul.mtree'), 'ul').length + 1));
	        });
	        $('.mtree li > *:first-child').on('click.mtree-active', function (e) {
	            if ($(this).parent().hasClass('mtree-closed')) {
	                $('.mtree-active').not($(this).parent()).removeClass('mtree-active');
	                $(this).parent().addClass('mtree-active');
	            } else if ($(this).parent().hasClass('mtree-open')) {
	                $(this).parent().removeClass('mtree-active');
	            } else {
	                $('.mtree-active').not($(this).parent()).removeClass('mtree-active');
	                $(this).parent().toggleClass('mtree-active');
	            }
	        });
	        node.children(':first-child').on('click.mtree', function (e) {
	            var el = $(this).parent().children('ul').first();
	            var isOpen = $(this).parent().hasClass('mtree-open');
	            if (!isOpen) {
	                var close_items = $(this).closest('ul').children('.mtree-open').not($(this).parent()).children('ul');
	                if ($.Velocity) {
	                    close_items.velocity({ height: 0 }, {
	                        duration: duration,
	                        easing: easing,
	                        display: 'none',
	                        delay: 100,
	                        complete: function () {
	                            setNodeClass($(this).parent(), true);
	                        }
	                    });
	                } else {
	                    close_items.delay(100).slideToggle(duration, function () {
	                        setNodeClass($(this).parent(), true);
	                    });
	                }
	            }
	            el.css({ 'height': 'auto' });
	            if (!isOpen && $.Velocity && listAnim)
	                el.find(' > li, li.mtree-open > ul > li').css({ 'opacity': 0 }).velocity('stop').velocity('list');
	            if ($.Velocity) {
	                el.velocity('stop').velocity({
	                    height: isOpen ? [
	                        0,
	                        el.outerHeight()
	                    ] : [
	                        el.outerHeight(),
	                        0
	                    ]
	                }, {
	                    queue: false,
	                    duration: duration,
	                    easing: easing,
	                    display: isOpen ? 'none' : 'block',
	                    begin: setNodeClass($(this).parent(), isOpen),
	                    complete: function () {
	                        if (!isOpen)
	                            $(this).css('height', 'auto');
	                    }
	                });
	            } else {
	                setNodeClass($(this).parent(), isOpen);
	                el.slideToggle(duration);
	            }
	            e.preventDefault();
	        });
	        function setNodeClass(el, isOpen) {
	            if (isOpen) {
	                el.removeClass('mtree-open').addClass('mtree-closed');
	            } else {
	                el.removeClass('mtree-closed').addClass('mtree-open');
	            }
	        }
	        if ($.Velocity && listAnim) {
	            $.Velocity.Sequences.list = function (element, options, index, size) {
	                $.Velocity.animate(element, {
	                    opacity: [
	                        1,
	                        0
	                    ],
	                    translateY: [
	                        0,
	                        -(index + 1)
	                    ]
	                }, {
	                    delay: index * (duration / size / 2),
	                    duration: duration,
	                    easing: easing
	                });
	            };
	        }
	        if ($('.mtree').css('opacity') == 0) {
	            if ($.Velocity) {
	                $('.mtree').css('opacity', 1).children().css('opacity', 0).velocity('list');
	            } else {
	                $('.mtree').show(200);
	            }
	        }
	    }
	}(jQuery, this, this.document));
	</script>
	 <script>
		$(function () {
		  $('[data-toggle="popover"]').popover();
		  $.fn.datetimepicker.defaults = {
			      language:  'zh-CN', //语言
				  autoclose:true, //当选择一个日期之后是否立即关闭此日期时间选择器。
				  todayBtn:false,
				  minView:2,
				  pickerPosition: "bottom-left",
				  format: 'yyyy-mm-dd',
				  bootcssVer:3,
				  todayHighlight:true
			  }
		})
      </script>
</body>
</html>